<template>
<div class='my'>
    <div class="my_header">
        <div class="header_l"><i class="iconfont icon-qrcode"></i></div>
        <div class="header_r">
            <i class="iconfont icon-notice"></i>
            <i class="iconfont icon-scan"></i>
            <i class="iconfont icon-setting"></i>
        </div>
    </div>
    <div class="my_avatar">
        <img src="@/assets/logo.png" alt="">
        <h2>立即登录</h2>
    </div>
    <div class="my_funs">
        <span class="funs_num">22</span><span class="funs_text">粉丝</span><span class="funs_line"></span>
        <span class="funs_num">22</span><span class="funs_text">关注</span><span class="funs_line"></span>
        <span class="funs_num">22</span><span class="funs_text">获赞</span>
    </div>
    <div class="create_conter">
        <span class="create_title">创作中心</span>
        <div class="create_tool">
            <div>
                <i class="iconfont icon-a-dianyingjiaojuan"></i>
                <p>视频</p>
            </div>
              <div>
                <i class="iconfont icon-a-newspaperbaozhixinwen"></i>
                <p>文章</p>
            </div>
              <div>
                <i class="iconfont icon-a-dianyingyingpianpaishe"></i>
                <p>直播</p>
            </div>
              <div>
                <i class="iconfont icon-a-notesbeizhubijijilu"></i>
                <p>动态</p>
            </div>
        </div>
    </div>
    <div class="more">
        <div class="more_setting">更多功能</div>
        <div class="more_tags">
        <div >
            <i class="iconfont icon-rl"></i>
            <p>团队管理</p>
        </div>
         <div>
            <i class="iconfont icon-rl"></i>
            <p>团队管理</p>
        </div>
         <div>
            <i class="iconfont icon-rl"></i>
            <p>团队管理</p>
        </div>
         <div>
            <i class="iconfont icon-rl"></i>
            <p>团队管理</p>
        </div>
            <div>
            <i class="iconfont icon-rl"></i>
            <p>团队管理</p>
        </div>
            <div>
            <i class="iconfont icon-rl"></i>
            <p>团队管理</p>
        </div>
            <div>
            <i class="iconfont icon-rl"></i>
            <p>团队管理</p>
        </div>
            <div>
            <i class="iconfont icon-rl"></i>
            <p>团队管理</p>
        </div>
        </div>
    </div>
</div>
</template>

<script>

export default {
components: {},
data() {
return {

};
},
computed: {},
watch: {},
methods: {

},
created() {

},
mounted() {

},
}
</script>
<style lang='less' scoped> 
.my {
    height: 100vh;
    background-color: #f4f5f7 !important;
   
.my_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .4rem /* 15/37.5 */;
    height: 1.173333rem /* 44/37.5 */;
    background-color: white;
    border-bottom: 1px solid gainsboro;
    i {
        font-size:.586667rem /* 22/37.5 */;
    }
    .header_r {
        i {
            margin-left: .266667rem /* 10/37.5 */;
        }
    }}
.my_avatar{
    position: relative;
    height: 2.453333rem /* 92/37.5 */;
    background-color: white ;
    img {
        position: absolute;
        width: 1.493333rem /* 56/37.5 */;
        height: 1.493333rem /* 56/37.5 */;
        border-radius: .746667rem /* 28/37.5 */;
        background-color: rgb(66, 66, 66);
        left: .426667rem /* 16/37.5 */;
        top: .533333rem /* 20/37.5 */;
    }
    h2 {
        position: absolute;
        padding: 0;
        margin: 0;
        top: .906667rem /* 34/37.5 */;
        left: 2.4rem /* 90/37.5 */;
        color: gray;
    }
}
.my_funs {
    box-sizing: border-box;
    text-align: left;
    height: 1.253333rem /* 47/37.5 */;
    background-color: white;
    padding: .106667rem 0 0 .64rem /* 24/37.5 */;
    .funs_num {
        color: #000;
        font-weight: 700;
        font-size: .48rem /* 18/37.5 */;
        margin-right: .16rem /* 6/37.5 */;
    }
    .funs_text {
        color: gray;
        font-size: .373333rem /* 14/37.5 */;
    }
    .funs_line {
        display: inline-block ;
        width: 1px;
        height: .373333rem /* 14/37.5 */;
        background-color: gray;
        margin: 0 .533333rem /* 20/37.5 */;
    }
}

.create_conter {
    width: 9.146667rem /* 343/37.5 */;
    height: 3.226667rem /* 121/37.5 */;
    margin: .32rem /* 12/37.5 */ auto;
    background-color: white;
    border-radius: .213333rem /* 8/37.5 */;
    .create_title{
    display: block;
    padding: 0;
    margin: 0;
    width: auto;
    font-size: .373333rem /* 14/37.5 */;
    font-weight: 700;
    text-align: left;
    padding-top: .32rem /* 12/37.5 */;
    padding-left: .426667rem /* 16/37.5 */;
}
    .create_tool {
        margin-top: .533333rem /* 20/37.5 */;
        display: flex;
        justify-content: space-around;
        i {
            font-size: .586667rem /* 22/37.5 */;
        }
    }
}
.more {
    width: 9.146667rem /* 343/37.5 */;
    height: 5.093333rem /* 191/37.5 */;
    margin: .32rem /* 12/37.5 */ auto;
    background-color: white;
    border-radius: .213333rem /* 8/37.5 */;
    .more_setting {
    font-size: .373333rem /* 14/37.5 */;
    font-weight: 700;
    text-align: left;
    padding-top: .32rem /* 12/37.5 */;
    padding-left: .426667rem /* 16/37.5 */;
    }
    .more_tags {
        margin-top: .64rem /* 24/37.5 */;
        display: flex;
        // justify-content: space-around;
        flex-wrap: wrap;
        div {
            i{
                font-size:.586667rem /* 22/37.5 */ ;
            }
            width: 25%;
        }
    }
}

}


</style>